﻿<style>
    .page-form .bui-fluid-space-3 {
        padding-top: .2rem;
    }
    .page-form .bui-fluid-space-3 .bui-check{
        margin-bottom: .2rem;
    }
    .page-form .bui-fluid-space-3 .bui-check i{
        margin-right: .1rem;
    }
</style>
<div class="bui-page page-form">
    <header class="bui-bar">
        <div class="bui-bar-left"> <a class="bui-btn btn-back"><i class="icon-back"></i></a> </div>
        <div class="bui-bar-main">多选框</div>
        <div class="bui-bar-right"> </div>
    </header>
    <main>
        <div class="section-title">多选列表</div>
        <ul class="bui-list">
            <li class="bui-btn bui-box">
                <div class="span1">
                    <label for="interester1">多选按钮样式1</label>
                </div>
                <input id="interester1" type="checkbox" class="bui-choose" name="interester" value="" text="" checked="checked">
            </li>
            <li class="bui-btn bui-box bui-btn-line">
                <div class="span1">
                    <label for="interester2">多选按钮样式2</label>
                </div>
                <input id="interester2" type="checkbox" class="bui-choose" name="interester" value="" text="">
            </li>
        </ul>
        <div class="section-title">多选列表2</div>
        <ul class="bui-list">
            <li class="bui-btn bui-box">
                <input id="interester21" type="checkbox" class="bui-checkbox" name="interester2" value="" text="" checked="checked">
                <div class="span1">
                    <label for="interester21">多选按钮样式1</label>
                </div>
            </li>
            <li class="bui-btn bui-box bui-btn-line">
                <input id="interester22" type="checkbox" class="bui-checkbox" name="interester2" value="" text="">
                <div class="span1">
                    <label for="interester22">多选按钮样式2</label>
                </div>
            </li>
        </ul>

        <div class="section-title">自定义多选列表</div>
        <div class="bui-fluid-space-3">
            <div class="span1">
                <input type="checkbox" class="bui-check" name="chongzhi1" check="汕头" uncheck="汕头">
            </div>
            <div class="span1">
                <input type="checkbox" class="bui-check" name="chongzhi1" check="广州" uncheck="广州">
            </div>
            <div class="span1">
                <input type="checkbox" class="bui-check" name="chongzhi1" check="东莞" uncheck="东莞">
            </div>
            <div class="span1">
                <input type="checkbox" class="bui-check" name="chongzhi1" check="深圳" uncheck="深圳">
            </div>
            <div class="span1">
                <input type="checkbox" class="bui-check" name="chongzhi1" check="佛山" uncheck="佛山">
            </div>
        </div>
        <div class="section-title">自定义多选图标列表</div>
        <div class="bui-fluid-space-3">
            <div class="span1">
                <div class="bui-check">
                    <input id="money1" type="checkbox" value="50" name="chongzhi2" checked><label for="money1"><i class="icon-home"></i>50元</label>
                </div>
            </div>
            <div class="span1">
                <div class="bui-check">
                    <input id="money2" type="checkbox" value="100" name="chongzhi2" ><label for="money2"><i class="icon-home"></i>100元</label>
                </div>
            </div>
            <div class="span1">
                <div class="bui-check">
                    <input id="money3" type="checkbox" value="200" name="chongzhi2" ><label for="money3"><i class="icon-home"></i>200元</label>
                </div>
            </div>
            <div class="span1">
                <div class="bui-check">
                    <input id="money4" type="checkbox" value="300" name="chongzhi2" ><label for="money4"><i class="icon-home"></i>300元</label>
                </div>
            </div>
            <div class="span1">
                <div class="bui-check">
                    <input id="money5" type="checkbox" value="500" name="chongzhi2" ><label for="money5"><i class="icon-home"></i>500元</label>
                </div>
            </div>
        </div>
    <main>
</div>